<template>
	<div>
		<div class="addAgent-content">
			<div class="form-header">
				<h4>{{ $t('funds.capital_adjustment.form_title2') }}</h4>
				<span>
					<code style="color:#FF3B30;">*</code>
					{{ $t('common.add_dialog_tips') }}
				</span>
			</div>
			<el-divider></el-divider>
			<el-form
				ref="formRef"
				class="form-box"
				:model="queryData"
				:rules="rules"
				label-width="auto"
			>
				<el-form-item
					:label="`${$t('common.choose_merchant')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.please_choose')"
						@change="searchUserName"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.user_name')}:`"
					prop="userName"
				>
					<el-input
						v-model.trim="queryData.userName"
						:placeholder="
							$t('funds.capital_adjustment.user_name_placeholder')
						"
						clearable
						minlength="4"
						maxlength="11"
						autocomplete="off"
						@blur="searchUserName"
						style="width: 420px;"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					:label="`${$t('funds.capital_adjustment.real_name')}:`"
					prop="realName"
				>
					<el-input
						v-model.trim="queryData.realName"
						:placeholder="
							$t('funds.capital_adjustment.real_name_placeholder')
						"
						disabled
						autocomplete="off"
					></el-input>
				</el-form-item> -->
				<!-- <el-form-item
					:label="`${$t('funds.capital_adjustment.vip_level')}:`"
					prop="vipLevel"
				>
					<el-input
						v-model="queryData.vipLevel"
						:placeholder="
							$t('funds.capital_adjustment.vip_level_placeholder')
						"
						disabled
						autocomplete="off"
					></el-input>
				</el-form-item> -->
				<el-form-item
					key="balance"
					prop="balance"
					:label="`${$t('member.balance')}:`"
				>
					<el-input-number
						v-model="queryData.balance"
						:placeholder="$t('member.load_center_wallet_banlance')"
						:controls="false"
						disabled
						:precision="2"
						style="width: 310px;"
					></el-input-number>
					<span style="position: absolute;left: 4px;color: #909399;">
						{{ handleCurrency(currency, true) }}
					</span>
					<el-button
						type="primary"
						:disabled="loading"
						style="margin-left: 15px;"
						@click="searchUserName"
					>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					key="adjustType"
					:label="`${$t('funds.capital_adjustment.adjust_type')}:`"
					prop="adjustType"
				>
					<el-select
						v-model="queryData.adjustType"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							v-for="item in memberPatchSubAdjustType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					key="lessMoney"
					:label="`${$t('funds.capital_adjustment.less_money')}:`"
					prop="lessMoney"
				>
					<el-input-number
						v-model="queryData.lessMoney"
						:placeholder="$t('common.please_enter')"
						:controls="false"
						:min="0.01"
						:max="999999999999.99"
						:precision="2"
						v-input="{ name: 'float', num: '2' }"
						style="width: 420px;"
					></el-input-number>
					<span style="position: absolute;left: 4px;color: #909399;">
						{{ handleCurrency(currency, true) }}
					</span>
				</el-form-item>
				<el-form-item
					key="remark"
					:label="`${$t('funds.capital_adjustment.remark')}:`"
					prop="remark"
				>
					<el-input
						v-model="queryData.remark"
						type="textarea"
						:placeholder="
							$t('funds.capital_adjustment.remark_placeholder')
						"
						clearable
						show-word-limit
						v-input="{ name: 'noEmpty' }"
						minlength="2"
						maxlength="500"
						style="width: 420px;"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.capital_adjustment.image_address')}:`"
				>
					<el-col :span="24">
						<UploadMany
							ref="imgUpload"
							:uploadAPI="uploadAPI"
							@setImageAddress="setImageAddress"
						></UploadMany>
					</el-col>
					<el-col :span="24">
						<p class="imgTip">
							{{ $t('funds.capital_adjustment.update_img_tip') }}
						</p>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						@click="handleSubmit"
					>
						{{ $t('common.submit') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<image-viewer
			:visible.sync="imageViewerVisible"
			:url-list="[imageViewerSrc]"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import { routerNames } from '@/utils/consts'
import { rules } from './components/rules'
import { LOSE_SYMBOl } from '@/utils/pattern'
export default {
	name: routerNames.memberDeduction,
	components: { UploadMany: () => import('@/components/UploadMany') },
	mixins: [list],
	data() {
		return {
			loading: false,
			queryData: {
				merchantId: '',
				userName: '',
				// realName: '',
				balance: undefined,
				adjustType: '',
				lessMoney: undefined,
				remark: '',
				imageAddress: ''
			},
			showBtb: false,
			imageViewerVisible: false,
			imageViewerSrc: '',
			currency: ''
		}
	},
	computed: {
		rules() {
			return rules(this)
		},
		...mapGetters(['merchantInfo']),
		uploadAPI() {
			return this.$api.imageUpload
		},
		memberPatchSubAdjustType() {
			return this.globalDics.memberPatchSubAdjustType || []
		}
	},
	watch: {
		'merchantInfo.id': {
			handler(newVal) {
				if (newVal) {
					this.queryData.merchantId = newVal
				}
			},
			immediate: true
		}
	},
	methods: {
		setImageAddress(imgList) {
			this.queryData.imageAddress =
				Array.isArray(imgList) && imgList.length > 0
					? imgList.join(',')
					: undefined
		},
		searchUserName() {
			let flag = false
			this.$refs.formRef.validateField(['merchantId'], (val) => {
				flag = val
			})
			if (!this.queryData.userName) {
				return
			}
			this.$refs.formRef.validateField(['userName'], (val) => {
				if (!flag && !val) {
					this.loading = true
					const params = {
						merchantId: this.queryData.merchantId,
						userName: this.queryData.userName,
						walletType: '1'
					}
					const _self = this
					_self.$api
						.getMemberBalance(params)
						.then((res) => {
							if (res.data) {
								const {
									balance,
									userId,
									// realName,
									// vipLevel,
									accountType,
									currency
								} = res?.data || {}
								_self.currency = currency
								_self.queryData.userId = userId
								// this.queryData.realName = realName
								// this.queryData.vipLevel = vipLevel
								const balanceLimit = _self.handleNumber(currency, balance)
								_self.queryData.balance = balanceLimit?.replace(LOSE_SYMBOl,'')
								_self.queryData.accountType = accountType
							} else {
								_self.$message.error(res.msg)
							}
							setTimeout(() => {
								_self.loading = false
							}, 200)
						})
						.catch(() => {
							_self.loading = false
						})
				}
			})
		},
		handleSubmit() {
			this.$refs.formRef.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.setMemberArtificialPatchAccountSub({
							...this.queryData,
							realAccountType: '1'
						})
						.then((res) => {
							this.$confirm(this.$t('common.action_success'), {
								type: 'success',
								showCancelButton: false,
								showConfirmButton: false
							})
								.then(() => {
									this.reset()
								})
								.catch(() => {
									this.reset()
								})
							setTimeout(() => {
								this.loading = false
							}, 1000)
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		reset() {
			this.currency = ''
			this.queryData.imageAddress = ''
			this.$refs?.imgUpload?.resetImgList()
			this.$refs.formRef.resetFields()
			this.queryData.balance = undefined
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep.addAgent-content {
	width: 900px;
	margin: 40px auto;
	border: 1px solid #dcdfe6;
	.form-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px 0;
		margin-bottom: -15px;
		color: #909399;
	}
	.form-box {
		width: 800px;
		margin: 20px auto;
		.el-select {
			width: 400px;
		}
		.el-input-number .el-input__inner {
			text-align: left;
		}
	}
}

.th_TH,
.en_US,
.vi_VN {
	.addAgent-content .form-box {
		width: 600px;
	}
}
</style>
